<template>
  <view class="container">
    <ve-form :model="form">
      <ve-card type="none">
        <ve-form-item label="财务打款备注" labelPosition="top">
          <ve-input type="textarea" placeholder="请输入" v-model="form.payRemark" :maxlength="400" />
        </ve-form-item>
        <ve-form-item label="打款凭证（支持上传jpg、png格式，最多上传10张）" labelPosition="top">
          <ve-upload v-model="form.payFileIdList" max-count="10"></ve-upload>
        </ve-form-item>
      </ve-card>
    </ve-form>

    <ve-bottom-box>
      <ve-button type="plain" size="long" @click="cancel">关闭</ve-button>
      <ve-button type="primary" size="long" @click="submit">确认</ve-button>
    </ve-bottom-box>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { updatePayFileApi } from '@/api/cost/index'

  const form = ref({})

  const cancel = () => {
    uni.navigateBack()
  }

  const submit = () => {
    let params = {
      id: form.value.id,
      payFileIdList: form.value.payFileIdList,
      payRemark: form.value.payRemark,
    }
    updatePayFileApi(params).then((res) => {
      uni.showToast({
        icon: 'none',
        title: '上传成功',
      })
      uni.navigateBack()
      uni.$emit('refreshData')
    })
  }

  onLoad((options) => {
    form.value.id = options.id
    form.value.payFileIdList = JSON.parse(options.payFileIdList)
    form.value.payRemark = options.payRemark
  })
</script>

<style lang="less" scoped>
  .container {
    padding: 24rpx;
  }
</style>
